<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-drawer-button">
    <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">ng2-pdf-viewer</span>
        </div>
    </header>
    <main class="mdl-layout__content">
        <div class="page-content">
            <div>
                <h2>Angular 2+ PDF Viewer</h2>
                <p>Angular 2+ Component to render PDF</p>
            </div>
          
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input [(ngModel)]="pdfSrc" [value]="pdfSrc" class="mdl-textfield__input" type="text" id="pdf-src">
                <label class="mdl-textfield__label" for="pdf-src">Set URL of the PDF file</label>
            </div>

            <div class="select-file__container">
                <p>
                    Or render preview by just selecting PDF file (no upload required)
                </p>
                <input (change)="onFileSelected()" type="file" id="file">
            </div>

            <div *ngIf="error" class="error mb">
                {{ error.message | json }}
            </div>

            <div class="mb">
                <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="original-size">
                    <input type="checkbox" id="original-size" class="mdl-switch__input"
                           [checked]="originalSize"
                           [(ngModel)]="originalSize"
                    >
                    <span class="mdl-switch__label">Original size</span>
                </label>
            </div>

            <div class="mb">
                <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="render-text">
                    <input type="checkbox" id="render-text" class="mdl-switch__input"
                           [checked]="renderText"
                           [(ngModel)]="renderText"
                    >
                    <span class="mdl-switch__label">Render text layer</span>
                </label>
            </div>

            <div class="mb">
                <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="show-all">
                    <input type="checkbox" id="show-all" class="mdl-switch__input"
                           [checked]="showAll"
                           [(ngModel)]="showAll"
                    >
                    <span class="mdl-switch__label">Show all pages</span>
                </label>
            </div>

            <div mdl>
                <button (click)="incrementZoom(-0.1)" class="mdl-button mdl-js-button">
                    -
                </button>
                <div class="page-number mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input [(ngModel)]="zoom"
                           [value]="zoom"
                           class="mdl-textfield__input"
                           type="number"
                           pattern="-?[0-9]*(\.[0-9]+)?"
                           id="pdf-zoom"
                    >
                    <label class="mdl-textfield__label" for="pdf-zoom">Zoom</label>
                    <span class="mdl-textfield__error">Input is not a number!</span>
                </div>
                <button (click)="incrementZoom(0.1)" class="mdl-button mdl-js-button">
                    +
                </button>
            </div>


            <div *ngIf="showAll">
              <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="stick-to-page">
                <input type="checkbox" id="stick-to-page" class="mdl-switch__input"
                       [checked]="stickToPage"
                       [(ngModel)]="stickToPage"
                >
                <span class="mdl-switch__label">Stick to page</span>
              </label>
            </div>

            <div mdl *ngIf="stickToPage && showAll || !showAll">
                <button (click)="incrementPage(-1)" class="mdl-button mdl-js-button">
                    Previous
                </button>
                <div class="page-number mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input [(ngModel)]="page"
                           [value]="page"
                           class="mdl-textfield__input"
                           type="number"
                           pattern="-?[0-9]*(\.[0-9]+)?"
                           id="pdf-page"
                    >
                    <label class="mdl-textfield__label" for="pdf-page">Page</label>
                    <span class="mdl-textfield__error">Input is not a number!</span>
                </div>
                <span *ngIf="pdf">of {{ pdf.numPages }}</span>
                <button (click)="incrementPage(1)" class="mdl-button mdl-js-button">
                    Next
                </button>
            </div>

            <div>
                <button (click)="rotate(-90)" class="mdl-button mdl-js-button">Rotate left</button>
                <div class="page-number mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input [value]="rotation"
                           class="mdl-textfield__input"
                           type="number"
                           disabled
                    >
                    <label class="mdl-textfield__label" for="pdf-page">Angle</label>
                </div>
                <button (click)="rotate(90)" class="mdl-button mdl-js-button">Rotate right</button>
            </div>

            <div *ngIf="!isLoaded && !error && progressData" id="progress">
                <div class="bg">
                    <div class="bar" [style.width]="progressData.loaded / progressData.total * 100 + '%'"></div>
                </div>
                <span>{{ getInt(progressData.loaded / progressData.total * 100) }}%</span>
            </div>

            <pdf-viewer [src]="pdfSrc"
                        [(page)]="page"
                        [rotation]="rotation"
                        [original-size]="originalSize"
                        (after-load-complete)="afterLoadComplete($event)"
                        [zoom]="zoom"
                        [show-all]="showAll"
                        [stick-to-page]="stickToPage"
                        [render-text]="renderText"
                        [external-link-target]="'blank'"
                        (error)="onError($event)"
                        (on-progress)="onProgress($event)"
            ></pdf-viewer>

        </div>
    </main>
    <footer class="mdl-mini-footer">
        <div class="mdl-mini-footer__left-section">
            <div class="mdl-logo">ng2-pdf-viewer</div>
            <ul class="mdl-mini-footer__link-list">
                <li><a href="https://github.com/VadimDez/ng2-pdf-viewer">Github</a></li>
                <li><a href="https://github.com/VadimDez">Vadym Yatsyuk</a></li>
            </ul>
        </div>
    </footer>
</div>
